



body {



	margin: 0;



}



#pagewrap {



	position: absolute;	



	width: 320px;



	height: 480px;



	overflow: hidden;



	background-image: -webkit-gradient(linear, left top, right top, from(#039ae6), to(#787978));



z-index: 1;



}



@-webkit-keyframes BG_Fade_animation {



	0% {opacity: 1.0;}



	50% {opacity: 0.0;}	



	100% {opacity: 1.0;}		



}  



#BG_Fade {



	position: absolute;	



	width: 320px;



	height: 480px;



	overflow: hidden;



	opacity: 1.0;	



	-webkit-animation-name: BG_Fade_animation;



    -webkit-animation-duration: 6.0s;



	-webkit-animation-iteration-count: infinite;



	-webkit-animation-timing-function: linear;



	-webkit-transition-delay: 2s;	    



	background-image: -webkit-gradient(linear, left top, left bottom, from(#050401), to(#212022));



	z-index: 1;



}



#BG_Overlay {



	position: absolute;



    top: 0px;



	width: 520px;



	height: 480px;



	opacity: 1.0;	



	background-color: transparent;



	overflow: hidden;



	z-index: 4;



}







@-webkit-keyframes One_hover {



0% {opacity: 1.0;     -webkit-transform:translateY(500px);}



15% {opacity: 1.0;     -webkit-transform:translateY(200px);}



30% {opacity: 1.0;     -webkit-transform:translateY(100px);}



45% {opacity: 1.0;     -webkit-transform:translateY(50px);}



60% {opacity: 1.0;     -webkit-transform:translateY(0px);}



75% {opacity: 1.0;    -webkit-transform:translateY(100px);}



90% {opacity: 1.0;    -webkit-transform:translateY(200px);}



100% {opacity: 1.0;    -webkit-transform:translateY(500px);}



}



#One {



	position: absolute;



	-webkit-transform:translateX(0px); 



  top:0px;



	background-color: transparent;



	overflow: visible;



	z-index: 5;



    -webkit-animation-name: One_hover;



    -webkit-animation-duration: 10.0s;



	-webkit-transition-delay: 0s;	    



	-webkit-animation-iteration-count:infinite;



-webkit-animation-timing-function: linear; 



}





@-webkit-keyframes Two_hover {



0% {opacity: 1.0;     -webkit-transform:translateY(500px);}



10% {opacity: 1.0;     -webkit-transform:translateY(200px);}



20% {opacity: 1.0;     -webkit-transform:translateY(100px);}



30% {opacity: 1.0;     -webkit-transform:translateY(50px);}



40% {opacity: 1.0;     -webkit-transform:translateY(0px);}



60% {opacity: 1.0;    -webkit-transform:translateY(100px);}



90% {opacity: 1.0;    -webkit-transform:translateY(200px);}



100% {opacity: 1.0;    -webkit-transform:translateY(500px);}



}



#Two {



	position: absolute;



	-webkit-transform:translateX(0px); 



  top:0px;



	background-color: transparent;



	overflow: visible;



	z-index: 5;



    -webkit-animation-name: Two_hover;



    -webkit-animation-duration: 10.0s;



	-webkit-transition-delay: 0s;	    



	-webkit-animation-iteration-count:infinite;



-webkit-animation-timing-function: linear;



}







@-webkit-keyframes Three_hover {



0% {opacity: 1.0;     -webkit-transform:translateX(400px);}



10% {opacity: 1.0;     -webkit-transform:translateX(200px);}



20% {opacity: 1.0;     -webkit-transform:translateX(100px);}



30% {opacity: 1.0;     -webkit-transform:translateX(50px);}



40% {opacity: 1.0;     -webkit-transform:translateX(0px);}



50% {opacity: 1.0;    -webkit-transform:translateX(100px);}



90% {opacity: 1.0;    -webkit-transform:translateX(200px);}



100% {opacity: 1.0;    -webkit-transform:translateX(400px);}



}



#Three {



	position: absolute;



	-webkit-transform:translateX(0px); 



  top:1px;



	background-color: transparent;



	overflow: visible;



	z-index: 5;



    -webkit-animation-name: Three_hover;



    -webkit-animation-duration: 10.0s;



	-webkit-transition-delay: 0s;	    



	-webkit-animation-iteration-count:infinite;



-webkit-animation-timing-function: linear;



}





@-webkit-keyframes Four_hover {



0% {opacity: 1.0;     -webkit-transform:translateX(300px);}



15% {opacity: 1.0;     -webkit-transform:translateX(200px);}



30% {opacity: 1.0;     -webkit-transform:translateX(100px);}



45% {opacity: 1.0;     -webkit-transform:translateX(50px);}



60% {opacity: 1.0;     -webkit-transform:translateX(0px);}



75% {opacity: 1.0;    -webkit-transform:translateX(100px);}



90% {opacity: 1.0;    -webkit-transform:translateX(200px);}



100% {opacity: 1.0;    -webkit-transform:translateX(300px);}



}



#Four {



	position: absolute;



	-webkit-transform:translateX(0px); 



  top:1px;



	background-color: transparent;



	overflow: visible;



	z-index: 5;



    -webkit-animation-name: Four_hover;



    -webkit-animation-duration: 10.0s;



	-webkit-transition-delay: 0s;	    



	-webkit-animation-iteration-count:infinite;



-webkit-animation-timing-function: linear;



}







@-webkit-keyframes Middleone_hover {



0% {opacity: 1.0;     -webkit-transform:translateY(-500px);}



25% {opacity: 1.0;     -webkit-transform:translateY(-100px);}



50% {opacity: 1.0;     -webkit-transform:translateY(0px);}



75% {opacity: 1.0;     -webkit-transform:translateY(100px);}



100% {opacity: 1.0;	-webkit-transform:translateY(400px);}



}



#Middleone {



	position: absolute;

left: 10px;



  top:74px;



	background-color: transparent;



	overflow: visible;



	z-index: 5;



    -webkit-animation-name: Middleone_hover;



    -webkit-animation-duration: 7.0s;



	-webkit-transition-delay: 0s;	    



	-webkit-animation-iteration-count:infinite;



-webkit-animation-timing-function: linear;



}





@-webkit-keyframes Middletwo_hover {



0% {opacity: 1.0;     -webkit-transform:translateX(-320px);}



25% {opacity: 1.0;     -webkit-transform:translateX(-100px);}



50% {opacity: 1.0;     -webkit-transform:translateX(0px);}



75% {opacity: 1.0;     -webkit-transform:translateX(100px);}



100% {opacity: 1.0;	-webkit-transform:translateX(320px);}



}



#Middletwo {



	position: absolute;



	-webkit-transform:translateY(0px); 



  top:12px;



	background-color: transparent;



	overflow: visible;



	z-index: 5;



    -webkit-animation-name: Middletwo_hover;



    -webkit-animation-duration: 5.0s;



	-webkit-transition-delay: 0s;	    



	-webkit-animation-iteration-count:infinite;



-webkit-animation-timing-function: linear;



}



#month {



	float:left;



	font: 16px " Helvetica";



	color: #91d9ff;



text-shadow: #000000" 2px 1px 2px;



	position: absolute;



	width: 20px;



	height: 21px;



font-weight: bold;



	top: 10px;



	left: 36px;



-webkit-transform: rotate(-90deg);



    display:"block";



	background-color: transparent;



}



#date {



	float:left;



	font: 27px " Helvetica";



	color: #91d9ff;



text-shadow: #000000" 2px 1px 2px;



	position: absolute;





	width: 20px;



	height: 21px;



font-weight: bold;



	-webkit-transform:translateX(0px);



	top: 30px;



	background-color: transparent;



}
#clock {
	position: absolute;
	font: 100px " Helvetica";
	color: #91d9ff;
text-shadow: #000000 3px 3px 3px;
	width: 200px;
	height: 100px;
font-weight: bold;
	top: 115px;
	left: -14px;
	background-color: transparent;
z-index: 16;
}
#ampm {
	position: absolute;
	font: 20px " Helvetica";
	color: #91d9ff;
text-shadow: #000000 3px 3px 3px;
	width: 200px;
	height: 100px;
font-weight: bold;
	top: 137px;
	left: -14px;
	background-color: transparent;
z-index: 17;
}



#custom {



position: absolute;top: 135px; 



left: -30px;



-webkit-transform: rotate(-90deg);



display:"block";



	font: 8px "Helvetica";



	color: #91d9ff;



width: 100px;



 font-weight:bold; 



 text-align: center;



text-shadow: #000000 2px 1px 2px;



z-index: 10;







}



#tab1 {



position: absolute;top: 451px; 



left: -117px;



-webkit-transform: rotate(-5deg);



display:"block";



	font: 10px "Helvetica";



	color: #91d9ff;



width: 300px;



 font-weight:bold; 



 text-align: center;



text-shadow: #000000 3px 3px 3px;



z-index: 16;



}



#tab2 {



position: absolute;top: 451px; 



left: -57px;



-webkit-transform: rotate(-5deg);



display:"block";



	font: 10px "Helvetica";



	color: #91d9ff;



width: 300px;



 font-weight:bold; 



 text-align: center;



text-shadow: #000000 3px 3px 3px;



z-index: 16;



}



#tab3 {



position: absolute;top:453px; 



left: 10px;



	font: 10px "Helvetica";



	color: #91d9ff;



width: 300px;



 font-weight:bold; 



 text-align: center;



text-shadow: #000000 3px 3px 3px;



z-index: 16;



}



#tab4 {



position: absolute;top:452px; 



left: 76px;



-webkit-transform: rotate(5deg);



display:"block";



	font: 10px "Helvetica";



	color: #91d9ff;



width: 300px;



 font-weight:bold; 



 text-align: center;



text-shadow: #000000 3px 3px 3px;



z-index: 16;



}



#tab5 {



position: absolute;top:451px; 



left: 136px;



-webkit-transform: rotate(5deg);



display:"block";



	font: 10px "Helvetica";



	color: #91d9ff;



width: 300px;



 font-weight:bold; 



 text-align: center;



text-shadow: #000000 3px 3px 3px;



z-index: 16;







}









#WeatherContainer{



    background-color: rgba(0,0,0,0);



opacity: 0.2px;



z-index: 10;



    -webkit-animation-name: weather_hover;



}



#TextContainer{



    font-size:55px;



    font-family: Helvetica;



    font-weight: bold;



color:#000000;



z-index: 10;







}



#city{



Display: none;



z-index: 10;



}



#temp{



	position: absolute; top:230px; right: 0px; down: 0px; left: 30px; width: 30px; height: 48px;



	margin-top:0px;



	text-align: left;



	font-family: Helvetica;



	font-size: 18px;



	font-weight: bold;



	text-shadow: #000000 2px 1px 2px;



	color: #91d9ff;



z-index: 10;



}



#desc{



	position: absolute; top: 23px; right: 0px; down: 0px; left: 17px; width: 220px; height: 61px;



	text-align: center;



	font-family: Neuropol;



	font-size: 12px;



	font-weight: bold;



	padding-top:0px;



	color: #91d9ff;



	text-shadow: #000000 2px 1px 2px;



    



z-index: 10;



}







#TextContainer p{



	margin:0;



z-index: 10;



}



#weatherIcon{



margin-top:0px; 



	position: absolute; top: 40px; right: 0px; down: 0px; left: 19px;



width: 320px; height: 461px; 



	height:220;



width:220;



    z-index: 2;



}







#box {



position: absolute; top: 0px; right: 0px; down: 0px; left: 0px; width: 320px; height: 480px;



	font: 13px "Helvetica";      



width:;



 font-weight:bold; 



 text-align: left;



text-shadow: #ffffff 0px 1px 2px;



z-index: 15;



}
